<template>
  <div>
    <!-- 轮播图片 -->
    <swiper :show-dots="true"  style="padding-bottom: 15px;" >
      <swiper-item  class="swiper-demo-img"  v-for="(item, index) in data.swiperImgs" :key="index">
        <img v-lazy="item" @click="getImages(item,index)">
      </swiper-item>
    </swiper>
    <!-- 更换图片 -->
    <upload-image @delImage="cannelImage" :showUploadImage.sync="changeImg" :images="accurentImg" :indexImage="indexs" :mark="'swiperImgs'"></upload-image>
  </div>
</template>
<script type="application/ecmascript">
import * as types from '@/vuex/types'
import UploadImage from '@/public/UploadImage'
import {Swiper,SwiperItem} from 'vux'
import { mapState} from 'vuex'
export default {
    components: {
     Swiper,
     SwiperItem,
     UploadImage
    },
    name: 'SwiperUploader',
    computed: {
      ...mapState({
        isEditing:state => state.moduleEdit.isEditing,
        tokens:state => state.moduleEdit.qntoken,
        data:state => state.moduleEdit.data,
      }),
    },
    data(){
      return{
        changeImg:false,
        indexs:'',
        accurentImg:'',
        stateImg:{
          image:'',
          index:''
        },
      }
    },
    methods:{
      getImages(item,index){
        if(this.isEditing==false){
          return
        }else{
          this.indexs = index
          this.accurentImg = item
          this.changeImg = true
          //this.$store.commit(types.CHANGEIMAGESTATUS,true)
        }
      },
      cannelImage(){
        this.changeImg = false
      },
    }
}
</script>
<style lang="less" scoped>
.swiper-demo-img{
  img{
    width:100%;
    height:100%;
  }
}
</style>